January 6, 2010  

Add Superfish drop down menu for Drupal 6 Theme


If you want Your Drupal theme to have some nice drop down menu, you can use Superfish. I’ll explain how to install it on your Drupal themes.

  1. Download Superfish from here.
    This zip file contain superfish javascript, css, and image. extract it to your theme folder. Create folder sf inside your theme directory and extract this file there.
  2. Edit yourtheme.info files.
    Add superfish javascript and css (optional) to your .info file. If you already have your own css for the drop down menu, you may not add the superfish css to you .info file.
    stylesheets[all][] = sf/css/superfish.css
    stylesheets[all][] = sf/css/theme.css
    scripts[] = sf/js/superfish.js
    If you want your superfish menu different from your Primary links, you can add this line in your .info file.
    regions[superfish_menu] = Superfish Menu
  3. If you want to use superfish for you primary links, you can add these lines to your template.php file.
    function phptemplate_preprocess_page(&$vars) {
    $vars['primary_menu'] = menu_tree(variable_get('menu_primary_links_source', 'primary-links'));
    $vars['secondary_menu'] = theme('links', $vars['secondary_links'], array('class' => 'links secondary-links'));
    }
    This function will load primary links tree to var primary_menu. You will use this primary_menu instead of primary_links in your page.tpl.php file.
    If you use superfish for diferent menu, you may not add this function.
  4. Edit your page.tpl.php file
    Add these lines in the <head> section.
    <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script>
    <!-- Script for SUPERFISH -->
    <script type="text/javascript">
    $(document).ready(function() {
    $("#superfish ul.menu").superfish(); });
    </script>    If you’re using superfish css, you use superfish in the red text. If you have your own css, you replace the red text with the id of your menu css. i.e.<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script> <!-- Script for SUPERFISH -->
    <script type="text/javascript">
    $(document).ready(function() {
    $("#mainnav ul.menu").superfish();
    });
    </script>    Add these lines in your drop down menu region:
    <div id="mainnav">
    <?php if (isset($primary_links)) : ?>
    <?php print $primary_menu; ?>
    <?php endif; ?>
    </div>

    or if you are using superfish menu:

    <?php if ($superfish_menu): ?><div id="superfish"><?php print $superfish_menu; ?></div>
    <?php endif; ?>
  5. Last step is to create your menu and check the expand checkbox in your menu.

Screen Shot:

I’m not using the superfish css in this screen shot. I’m using diferent css.

42 responses to “Add Superfish drop down menu for Drupal 6 Theme”

  1. Roger Duck says :

    Thanks for this. Great timing.

    Reply
  2. Hence says :

    Well done brother, please write more …

    Reply
  3. Forcebook says :

    Promlem!!!
    For theme Analytic not work, some problem. Disable the whole css system. Uf!
    I don’t understand. Can help me?

    Reply
    • Forcebook says :

      For this theme no work!
      http://drupal.org/project/analytic :((

      Reply
    • ericwijaya says :

      @Forcebook
      actually, you need to add these lines in your .info files:
      stylesheets[all][] = style.css
      stylesheets[all][] = sf/css/superfish.css
      stylesheets[all][] = sf/css/theme.css
      scripts[] = sf/js/superfish.js

      Analytic themes don’t insert the style.css files in its .info files because its only use style.css files for all the css.

      note: please re-download the sf files. I’ve made some update on the files based on this tutorial.

      Hope it works.

      Reply
  4. Forcebook says :

    Thank you!

    I added lines in .info files. 🙂

    On other themes work nice, but for http://drupal.org/project/analytic work if add css into orginal css themes.
    I will try to download it again and set it.
    Thank You for your quick response.

    Reply
  5. Forcebook says :

    I setup and work well when add stylesheets[all][] = style.css to theme .info.
    And probmem was in template.php when add code.
    when reneame: function phptemplate_preprocess_page
    to: function themename_preprocess_page
    Its work well.

    Thanks again! :))

    Reply
    • ericwijaya says :

      yup… for more specific function, you can rename the phptemplate with ur theme name.. Thx Forcebook..

      Reply
      • forcebook says :

        I add some function defined, but not named function with theme name and superfish not work well. Does not matter now, I have now another problem
        I have one question for wath Superfish menu gone when enable Tabs module.
        I’m noob fo javascript.

        PS. I prefer use Drupal as CMS

      • forcebook says :

        Only problem was in IE

  6. sivakumar says :

    Good to know this integration in future

    Reply
  7. Tukoro Sanzo says :

    Most of your post is the same as like this url :
    http://adaptivethemes.com/add-superfish-drop-menus-to-any-theme-easily

    Reply
  8. ericwijaya says :

    i learn from him and some other posts and make some modification because i don’t use the superfish css. I’m using my own css. ^^

    Reply
  9. sangi says :

    i am working with it but it is not displaying the sublinks only the toplinks are being displayed. I have done in the same way but dont know why?
    Any help plz………………

    Reply
    • ericwijaya says :

      check your menu, is it have child menu and already expanded? you have to expand the menu so it can be drop downed..

      Reply
  10. alex says :

    I just tryyin’ Your tutorial with AT_Koda (Subtheme from Adaptive theme –> http://drupal.org/project/at_koda). I follow Your step to implement drop down menu using default primary menu on this themes but I found nothing change. I’m new in drupal. Can You tell me the way to makes Your tutorial work for that themes?

    in the section of page.tpl.php I’ve inserted:

    $(document).ready(function() {
    $(“#superfish ul.menu”).superfish(); });

    Reply
    • ericwijaya says :

      Hi alex, sorry for the long reply, I haven’t check on my blog lately.. Do you already follow the steps above? It’s not quite clear what is the problem with ur theme… Thanks

      Reply
  11. iceman says :

    I guess the variable, ‘$superfish_menu’ in the last bit of code should be ‘$primary_menu’.

    Otherwise, it worked like magic.

    Thanks. :))

    Reply
  12. saarmaja says :

    you have a feedjit widget and a wordpress.com blog can not javascript,
    and you have a widget only with HTML
    can you please say me
    the code ????
    very nice from you
    hope of your answer
    saarmaja

    Reply
  13. Wescley says :

    Hi Eric

    I have a problem.

    I´m using a theme that doesn’t has template.php file.
    This is the theme: http://drupal.org/project/id-facta

    What do I do in this case? I have to create my own “template.php” file? If yes, what code lines must have? I’m new on drupal (I’m not a themer)

    Thanks

    Reply
    • ericwijaya says :

      Hi Wescley,

      You can just create it and insert these lines

      function phptemplate_preprocess_page(&$vars) {
      $vars['primary_menu'] = menu_tree(variable_get('menu_primary_links_source', 'primary-links'));
      $vars['secondary_menu'] = theme('links', $vars['secondary_links'], array('class' => 'links secondary-links'));
      }

      with opening php tags at first.

      Reply
  14. Michael Ray says :

    Has anyone had any issues with superfish not detecting working javascript correctly in drupal? I get working menus without the ‘sf-javascript-enabled’ class attached to my sf-menu ul. Anyone have this issue or any thoughts as to why this occurs?

    Reply
  15. miros says :

    thanks for this tuto
    but for me it don’t work on Agency Dark theme
    no error message
    nothing happens!
    Cheers.

    Reply
  16. Mark Lee says :

    Was following this tutorial but you never indicated which file to edit when you instruct to input the dode to the main nav drop down menu. I cant find anything like this in the template or page.tpl

    PLEASE ADVISE

    Reply
  17. Presto! says :

    I’m getting this error:

    Fatal error: Cannot redeclare phptemplate_preprocess_page() (previously declared in /home/folioh/public_html/sites/all/themes/beginning/template.php:7) in /home/folioh/public_html/sites/all/themes/beginning/template.php on line 51

    Reply
  18. Presto! says :

    Nevermind, I figured it out.

    Reply
  19. Maiya says :

    Thanks for the post, but IE 8 output error how to fix?

    Reply
  20. met says :

    I did it it worked well but when I create third level elemnt it dosent show up child element any solution ?

    Reply
  21. met says :

    Great it worked ! I appreciate for your help

    Reply
  22. met says :

    ericwijaya I have some issue in ie6 and 7 it gives extra margin every layer

    in i8 firefox and chrome look great

    Reply
  23. Waseem says :

    Hi Eric Wijaya ,

    I have added the menu but menu is not visible in the home. i have customised the default garland theme in this case.

    Reply
  24. pratik says :

    hi. I have devloped a site and this is the link to site is http://isrg.shef.ac.uk/drupal. The problem is I am not getting a drop down in left vertical menu. But if i shift my left bar in the menu region i get a drop down. Is there any way that i can get a drop in my left vertical menu…Please help guys

    Reply
  25. Roby Ardiansyah says :

    kalo ngaplikasikan ke zen subtheme gimana?

    Reply
  26. spindles says :

    Please i need a drop down menu for journal crunch…how do i go about it. journal crunch does not support drop down menu using the necessary modules to make that happen. Please quite urgent.
    Thanks

    Reply
  27. ericwijaya says :

    Hi spindles,

    You can use nice menu modules, modify some of the template file, modify some css and you get your drop down menu for journal crunch. 🙂

    Reply
  28. alexkavon says :

    Any chance of updating this for drupal 7?

    Reply
  29. saidur says :

    Css load . but drop down menu not working

    $(document).ready(function() {
    $(“#superfish ul.menu”).superfish();
    });

    Primary links regions :

    ‘menu’));
    }?>

    Reply
  30. Sumit says :

    Hi,
    I am using the superfish menu.It is working like a charm but I am facing one problem while themeing my primary link.I have added “$vars[‘primary_menu’] = menu_tree(variable_get(‘menu_primary_links_source’, ‘primary-links’));” in phptemplate_preprocess_page(&$vars) function in template file.It is working well when i used this statement “print $primary_menu” in page.tpl.php.
    I want to add my own css class with superfish menu.To achieve this I used this statement theme(‘links’, $primary_menu, array(‘class’ => ‘topMenu clearfix’)) After using this none of primary get displayed.Please assist me on this.
    Thanks
    Sumit

    Reply
  31. plan seo says :

    It’s a pity you don’t have a donate button! I’d most certainly donate to this fantastic blog! I guess for now i’ll settle for bookmarking and adding your RSS feed to my Google account.
    I look forward to new updates and will talk about this blog with my Facebook group.

    Talk soon!

    Reply

Leave a comment